<template>
	<view>
		
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="details">
				<view class="mi">
					<view class="mibg">
						<text>{{item.zi}}</text>
					</view>
					<view class="words_details">
						<view class="content">
							<view class="text">
								<text>拼音</text>
							</view>
							<view class="words">
								<text>{{item.pinyin}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>部首</text>
							</view>
							<view class="words">
								<text>{{item.bushou}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>部首笔画</text>
							</view>
							<view class="words">
								<text>{{item.bushoubh}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>总笔画</text>
							</view>
							<view class="words">
								<text>{{item.zbh}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>汉字五行</text>
							</view>
							<view class="words">
								<text>{{item.hzwx}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>吉凶寓意</text>
							</view>
							<view class="words">
								<text>{{item.jxyy}}</text>
							</view>
						</view>
						
						
					</view>
				</view>

			</view>
			<view class="xaingxi">
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">笔顺读写</text>
					</view>
					<view class="d">
						{{item.bsdx}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">基本解释</text>
					</view>
					<view class="d">
						{{item.jbjs}}
					</view>
				</view>
				
			
				
				
			
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seachVal: '',
				list:[],
				rows: 6, // 米字格的行数
				cols: 8 ,// 米字格的列数
				names:""
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"名字在线生成",
						path:'/page/xmscq/xmscq'
					
						
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '名字在线生成',
				path:'/page/xmscq/xmscq'
			}
		},
		onLoad(options) {
			console.log(options)
			this.doSearch(options.name)

		},
		methods: {
			 doSearch(name) {
				 uni.showLoading({
				 	title:'加载中'
				 })
			   this.$api.queryzidian1({
					content: name
				}).then(res => {
					if(res.rows.length==0){
						uni.showToast({
							title:'没有找到该文字'
						})
						return
					}
					console.log(res)
					this.list = res.rows;
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	text{
		user-select: all;
	}
	.details {
		background: #f6f2ef;
		height: 265rpx;

		.mi {
			display: flex;
			padding: 10px;

			.mibg {
				width: 200rpx;
				height: 200rpx;
				background-image: url(https://www.leedong.top/img/mi.png);
				background-size: 100% 100%;
				text-align: center;
				line-height: 200rpx;

				text {
					font-size: 145rpx;
					color: #db143a;
					font-weight: 600;
					font-family: cursive;
				}
			}

			.words_details {
				width: calc(100vw - 114px);
				display: flex;
				flex-wrap: wrap;
				justify-content:center;

				.content {
					display: flex;
					padding-left: 10rpx;
					margin-top: 10rpx;
					width: 45%;
					.text {

						min-width: 60px;
						height: 20px;
						text-align: center;
						font-size: 26rpx;
						color: #000;
						border: 1px solid #bf9380;
						border-radius: $uni-border-radius-base;
						line-height: 20px;
						background-color: #f1ded5;
					}

					.words {
						padding-left: 10rpx;
					}
				}
			}
		}
	}

	.xaingxi {
		background: #f6f2ef;

		.c {
			margin-top: 10px;

			.t {
				font-size: 30rpx;
				width: 100%;
				padding: 10px;

				display: flex;

				.f {
					padding: 0 10rpx;
				}

				.shu {
					width: 4px;
					height: 24px;

					background-color: #9d9e97;
				}
			}

			.d {
				padding-left: 10px;
			}
		}
	}
</style>